<template>
  <div v-show="show">
    <ul :style="{ left: `${left}px`, top: `${top}px` }" class="contextmenu">
      <li>
        <el-button text size="small" @click="operation('1')">重新加载</el-button>
      </li>
      <li>
        <el-button text size="small" @click="operation('2')">关闭所有</el-button>
      </li>
      <li>
        <el-button text size="small" @click="operation('3')">关闭左边</el-button>
      </li>
      <li>
        <el-button text size="small" @click="operation('4')">关闭右边</el-button>
      </li>
      <li>
        <el-button text size="small" @click="operation('5')">关闭其他</el-button>
      </li>
    </ul>
  </div>
</template>

<script setup>

//初始化值
const left = ref(0)
const top = ref(0)


// refs
const show = ref(false)

const menu = ref(null)

const router = useRouter()
const store = useStore()

/**
 * 打开右键菜单
 * * @param {Object} menuItem - 当前点击的 tab 对象
 *  * @param {{left: number, top: number}} position - 鼠标位置
 */
const openDia = (menuItem, position) => {
  //弹出位置设置
  left.value = position.left
  top.value = position.top
  //设置菜单
  menu.value = menuItem
  //打开弹框
  show.value = true

}

// 右键操作处理
const operation = code => {
  switch (code) {
    case '1': // 重新加载
      router.go(0)
      break
    case '2': // 关闭所有
      store.dispatch('menuTab/closeAll')
      router.push('/sy')
      break
    case '3': // 关闭左边
      store.dispatch('menuTab/closeLeft', menu.value?.id)
      break
    case '4': // 关闭右边
      store.dispatch('menuTab/closeRight', menu.value?.id)
      break
    case '5': // 关闭其他
      store.dispatch('menuTab/closeOther', menu.value?.id)
      break
  }
  show.value = false
}

// 点击页面空白处隐藏菜单
onMounted(() => {
  window.addEventListener('click', () => {
    show.value = false
  })
})

// emits
defineExpose({
  openDia
})

</script>

<style scoped>
.contextmenu {
  margin: 0;
  border: 1px solid #ccc;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
}

.contextmenu li {
  margin: 0;
  padding: 0 10px;
}



.contextmenu li button {
  color: #2c3e50;
}
</style>
